<template>
  <div class="container">
      <div class="video">
           <video :src="info.video"></video>
           <div class="report">
              <report :info="info" type="1" model="1"></report>
          </div>
      </div>
      <div class="originator weui-cell" >
        <div class="weui-cell__hd">
             <avatar :avatar="info.user.avatar" :Level="info.user.partner_level" :userId="info.user.id" :isAuth="info.user.is_auth" :isPartner="info.user.is_partner" v-if="info.user"></avatar>
        </div>
        <div class="weui-cell__bd">
            <div class="nickname">{{info.user.nickname}}</div>
            <div class="time">{{info.created_at}}</div>
        </div>
        <div class="weui-cell__ft">
             <Follow :info="info" :userId="info.user.id" ></Follow>
        </div>
      </div>
      <div class="content">
        {{info.video_desc}}
      </div>
      <comment :comment="info" :role="12" @click="change" :listCom="list"></comment>
      
  </div>
</template>

<script>
import comment from "@/components/comment";
import Follow from "@/components/follow"
import avatar from "@/components/avatar"
import {showComment} from "@/api/operate.js"
import {show} from "@/api/index"
export default {
  components: {
      comment,
      Follow,
      avatar
  },

  data () {
    return {
       info:{},
       keType:"",
       userId:0,
       list:[],
       load:false,
       currentpage:1,
       videoId:""
    }
  },
  methods:{
     toInfo(e){
        let url=e.currentTarget.dataset.url;
        mpvue.navigateTo({url})
     },
     getInfo(){
       let data={};
        data.id=this.videoId;
        data.type=this.keType;
        data.uid=this.userId;
       show(data).then(res=>{
          this.info=res.data
       })
     },
     change(data){
        this.info=data.comment
     },
     bian(data){
         console.log(data)
     },
     getComment(){
       let data={};
       data.type=this.keType;
       data.id=this.videoId
       data.user_id=this.userId;
         
      showComment(data).then(res=>{
        console.log(res)
        if(res.code==200){
          this.queS=false
          let last_page=res.data.total_page;
          if(this.currentpage==1){
            this.list=res.data.data
          }else{
            this.list=this.list.concat(res.data.data);
          }
          console.log(this.list)
          if (last_page > this.currentpage){
              this.load=true
          }else{
              this.load=false
          }
        }else{
           this.list=[]
           this.queS=true
        }
          
      },err=>{
          this.queS=true
      }).catch(err=>{
          this.queS=true
      })
    },
  },
  created () {
    
  },
  onLoad(options){
     Object.assign(this.$data, this.$options.data())
     this.videoId=options.id;
     this.keType=options.keType
     wx.getStorageSync("user_info").id?this.userId=wx.getStorageSync("user_info").id:'';
     this.getInfo()
  },
  onReachBottom(){
    if(this.load){
       this.currentpage++
       this.getComment()
    }
  },
  
  onShow(){
     this.getComment()
  },
  onUnload(){
   
  },
}
</script>
<style>

</style>
<style scoped lang="scss">
.video{
    padding-bottom:0;
    position: relative;
    video{
        width:100%;
    }
    .report{
      position: absolute;
      top: 15px;
      right: 15px;
      z-index: 2
    }
}
.content{
  font-size:14px;
  font-weight:500;
  color:rgba(51,51,51,1);
  line-height:24px;
  padding: 5px 15px;
}
.nickname{
  font-size:14px;
  font-weight:bold;
  color:rgba(26,132,251,1);
  line-height:18px;
}    


</style>
